<template>
	<div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<div class="head">
					<a @click="$router.push({path: '/Assets'})" class="return"></a>
				</div>
				<div class="user-hd">
					<div class="weui-cells" v-if="personal">
						<div class="weui-cell" style="padding-left: 20px;">
							<div class="weui-cell__hd tx">
								<img src="../assets/images/logo2.png" alt="">
							</div>
							<div class="weui-cell__bd">
								<div class="f18">
									<span v-text="personal.userName"></span>
								</div>
								<div class="f14">
									<span v-text="personal.uuid"></span>
									<!-- <span v-if="personal.trueName" v-text="personal.trueName">
										
									</span>
									<span v-else>未实名</span> -->
								</div>
							</div>
							<div class="weui-cell__ft">

							</div>
						</div>
					</div>
				</div>
				<group class="ml" label-width="9.5em" label-margin-right="2em">
					<!-- <cell title="实名认证" @click.native="getAuthentication">
						<img slot="icon" width="30" src="../assets/images/My-2.png">
					</cell> -->
					<cell title="我的邀请码" @click.native="$router.push({path: '/Invite2'})">
						<img slot="icon" width="30" src="../assets/images/My-3.png">
					</cell>
					<cell title="安全中心" @click.native="$router.push({path:'/Safety'})">
						<img slot="icon" width="30" src="../assets/images/My-4.png">
					</cell>
					<!-- <cell title="支付账户" @click.native="$router.push({path: '/Pay'})">
						<img slot="icon" width="30" src="../assets/images/My-5.png">
					</cell> -->
					<cell title="充币" @click.native="$router.push({path: '/ToChange'})">
						<img slot="icon" width="30" src="../assets/images/My-6.png">
					</cell>
					<cell title="提币" @click.native="$PayPwd('/OutChange','/My')">
						<img slot="icon" width="30" src="../assets/images/My-7.png">
					</cell>
					<cell title="我的团队" @click.native="$router.push({path: '/MyTeam'})">
						<img slot="icon" width="30" src="../assets/images/My-8.png">
					</cell>
					<!-- <cell title="我的糖果" @click.native="$router.push({path: '/MyCandy'})">
						<img slot="icon" width="30" src="../assets/images/My-9.png">
					</cell> -->
				</group>
				<div class="btn">
					<van-button slot="button" size="normal" :loading="loading" type="info" @click.native="loginOut">退出登录</van-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { Toast, Dialog } from 'vant';
	import { mine, base, safety } from './../utils/api';
	let _this;
	export default {
		data() {
			return {
				personal: [],
				accounts: [],
				users: '',
				localVer: '0.0.1', //版本号
				show: false,
				loading: false
			}
		},
		beforeCreate() {
			_this = this;
		},
		created() {

		},
		mounted() {
			this.getUser();
			_this.$nextTick(() => {
				setTimeout(() => {
					if(window.plus) {
						// 获取本地应用资源版本号
						plus.runtime.getProperty(plus.runtime.appid, function(inf) {
							_this.localVer = inf.version;
							_this.show = true;
						});
					} else {
						_this.show = false;
					}
				}, 100);
			});
		},
		methods: {
			getUser() { // 个人信息
				this.getPer();
			},
			getPer() {
				mine.getPersonal().then(res => {
					_this.personal = res.data;
				})
			},
			getAuthentication() {
				mine.getPersonal().then(res => {
					if(res.data.idcardVerifyStatus == 1) { // 已实名成功
						this.$router.push({
							path: '/UserCenter'
						})
					} else {
						this.$router.push({
							path: '/Authentication2'
						})
					}
				})
			},
			loginOut() { // 退出
				Dialog.confirm({
					message: '您确定要退出登录吗？',
					confirmButtonText: '退出',
					cancelButtonText: '否',
					cancelButtonColor: 'white'
				}).then(() => {
					base.getSignOut().then(res => {
						sessionStorage.clear();
						localStorage.clear();
						_this.axios.defaults.headers['Authorization'] = '';
						Toast({
							duration: 1000,
							message: res.msg
						});
						_this.$router.push({
							path: '/Login'
						});
					})
				}).catch(() => {

				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.btn /deep/ .van-button{background-color:#525fd6 !important;border:1px solid #525fd6 !important;}
	.head~.overlay {
		top: 0 !important;
	}
	
	.head {
		background: transparent;
		position: absolute;
	}
	
	.f18 {
		font-size: 18px;
		font-weight: bold;
	}
	
	.f14 {
		font-size: 14px;
	}
	
	.f13 {
		font-size: 13px;
	}
	
	.weui-cells {
		background: none !important;
	}
	
	.user-hd {
		background: url(../assets/images/My-1.png) 100% 100%;
		background-size: cover;
		color: #fff;
		position: relative;
		min-height: 170px;
		padding-top: 10px;
		.yz {
			position: absolute;
			right: 0;
			top: 36%;
			background: rgba(52, 75, 125, .9);
			padding: 0 6px;
			border-radius: 12px 0 0 12px;
			font-size: 14px;
			img {
				width: 18px;
				height: 18px;
				vertical-align: top;
				position: relative;
				top: 2px;
				padding-right: 4px;
			}
		}
		.info {
			position: absolute;
			right: 10px;
			top: 10px;
			width: 24px;
			height: 24px;
			background: url(../assets/images/g6.png) no-repeat center;
			background-size: 24px;
			z-index: 999;
			i {
				width: 10px;
				height: 10px;
				background: #fff;
				border-radius: 50%;
				display: block;
				position: relative;
				left: 18px;
				top: -3px;
			}
		}
		.tx {
			position: relative;
			margin-right: 15px;
			img {
				width: 66px;
				height: 66px;
				border: 2px solid #fff;
				border-radius: 50%;
				background: #fff;
			}
			.level {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 20px;
				height: 20px;
				line-height: 20px;
				background: #feb542;
				color: #fff;
				border-radius: 50%;
				border: 1px solid #fff;
				font-size: 12px;
				text-align: center;
			}
		}
		.weui-cells {
			background: none;
			padding: 20px 0 10px;
			.weui-cell__bd {
				padding-right: 50px;
			}
		}
		.fixed {
			position: absolute;
			bottom: -55px;
			padding: 15px 10px;
			width: 100%;
			box-sizing: border-box;
		}
		.weui-flex {
			background: #344b7d;
			color: #a9a9a9;
			padding: 15px 0;
			.val {
				font-size: 20px;
				color: #00dd94;
			}
		}
	}
	
	.weui-cell:before {
		border-top: 0;
	}
	
	.weui-fixed-btm .weui-flex__item {
		text-align: center;
		border-right: 1px solid #70798d;
	}
	
	.weui-fixed-btm .weui-flex__item:last-child {
		border-right: 0;
	}
	
	.weui-grid {
		text-align: center;
		img {
			width: 30px;
		}
		p {
			font-size: 14px;
			padding-top: 10px;
		}
	}
	
	.list {
		background: #fff;
		margin: 10px;
		border-radius: 10px;
		overflow: hidden;
		.title {
			margin: 0 15px;
			padding: 15px 0;
			font-size: 18px;
			font-weight: bold;
			color: #333;
		}
	}
	
	/deep/ .weui-cells:after {
		border-bottom: 0;
	}
	
	/deep/ .weui-grid:after {
		border-bottom: 0;
	}
	
	/deep/ .weui-grids:before {
		border-top: 0;
	}
	
	/deep/ .vux-1px-b:after {
		border-bottom: 1px solid #f5f5f5;
	}
	
	.prompt {
		text-align: center;
		color: #999;
		padding: 30px 0;
		.btn {
			background: #702aac;
			display: inline-block;
			color: #fff;
			padding: 5px 20px;
			border-radius: 20px;
			margin-top: 20px;
		}
	}
	
	.ml {
		margin: 0 20px;
		position: relative;
		top: -50px;
		/deep/ .weui-cells {
			border-radius: 5px;
		}
		/deep/.weui-cell {
			background: #24293e !important;
			font-size: 15px !important;
		}
		/deep/ .weui-cell__hd img {
			margin-right: 10px;
		}
	}
	
	.btn {
		position: relative;
		top: 30px;
		padding: 0px 20px;
	}
	
	.name {
		font-size: 13px;
	}
</style>